<template>
  <div class="body">
    <div class="box">
      <el-page-header @back="goback" content="详情界面"></el-page-header>
      <div class="card">
        <img
          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          alt=""
        />
      </div>
      <div class="info">
        <div class="item">需求商品: {{ request.name }}</div>
        <!-- <div class="item">商品类别: {{ request.catolog }}</div> -->
        <div class="item">期望价格: {{ request.price }}</div>
        <div class="item">需求数量: {{ request.num }}</div>
        <div class="item item2">需求描述: {{ request.introduction }}</div>
        <div class="item">
          <!-- <el-button @click="collect" type="primary" v-if="isCollected"
            >添加收藏</el-button
          >
          <el-button @click="uncollect" type="primary" v-else
            >取消收藏</el-button
          > -->
          <el-button @click="talkto" type="primary">联系买家</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.request = this.$store.state.request;
  },
  data() {
    return {
      request: {
        requestid: "",
        userid: "",
        username: "",
        name: "",
        price: "",
        num: "",
        img: "",
        introduction: "",
      },
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    talkto() {
      if (this.$store.state.isLogin === false) {
        alert("请先登录!");
        return;
      }
      //买家
      var user = {
        username: this.request.username,
        userid: this.request.userid,
        userimg:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      };
      this.$store.commit("talkto", user);
      this.$router.push("mymessage");
    },
    collect() {
      if (this.$store.state.isLogin === false) {
        alert("请先登录!");
        return;
      }
      //收藏商品
      alert("收藏");
    },
    uncollect() {
      //取消收藏
      alert("取消收藏");
    },
    isCollected() {
      //是否收藏了
      return false;
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  height: 960px;
}
.box {
  width: 60%;
  background-color: #fff;
  height: 800px;
  margin: 0 auto;
}
/deep/.el-page-header {
  line-height: 70px;
}
/deep/.el-page-header__title {
  font-size: 23px;
}
/deep/.el-page-header__content {
  font-size: 23px;
}
/deep/.el-page-header i {
  font-size: 30px;
  margin-left: 20px;
}
.card {
  display: inline-block;
  margin: 30px;
  width: 40%;
}
.info {
  float: right;
  width: 50%;
  height: 90%;
  padding: 20px;
}
img {
  width: 100%;
}
.item {
  width: 100%;
  height: 80px;
  font-size: 26px;
  margin-top: 10px;
}
.item2 {
  height: 200px;
}
</style>